<template>
  <!-- 用户业务详情 -->
  <div id="user-card-detail">
		<div class="content">
			<top-nav :title="title">
				<template v-slot:right class="vist-sti">
                    <span class="vist-sti-icon iconfont icon-liulan"></span>
                    <span class="vist-sti-count">{{pageBasicData.visitCount}}</span>
                </template>
			</top-nav>
			<div v-show="Object.keys(userInfo.getData).length > 0" class="page-content">
				<!-- 用户信息 -->
				<div class="user-info">
					<div class="user-info-top">
						<div class="user-info-left">
							<!-- <van-image round lazy-load :src="userInfo.img" id="issue-user-img" class="user-img" /> -->
							<user-head-img 
							id="issue-user-img" 
							class="head-img" 
							:userId="userInfo.userId"
							:width="50" 
							:height="50"
							:userImg="userInfo.img" />
							<van-image round lazy-load :src="userInfo.sexImg" id="user-head-sex" class="user-sex" />
						</div>
						<div class="user-info-right">
						<div class="user-info-right-children user-info-right-name-div">
							<div class="user-info-right-children-left">
								<div class="user-name">{{userInfo.name}}</div>
							</div>
						</div>
						<div class="user-info-right-children user-info-right-other">
							<div class="user-info-id-div">
								<span class="user-info-id-span"></span>
								<a @click="clickFollow" :class="followInfo.class" id="follow">{{followInfo.text}}</a>
							</div>
						</div>
						</div>
					</div>
					<div class="user-info-other">
						<div v-show="userInfo.signature" class="user-info-option">
							<span class="user-info-option-explain">签名 : </span>
							<span id="user-info-com-text">{{userInfo.signature}}</span>
						</div>
						<div v-show="userInfo.area" class="user-info-option">
							<span class="user-info-option-explain">位置 : </span>
							<span id="user-info-area-text">{{userInfo.area}}</span>
						</div>
						<div v-show="userInfo.companyName" class="user-info-option">
							<span class="user-info-option-explain">企业 : </span>
							<span id="user-info-com-text">{{userInfo.companyName}}</span>
						</div>
					</div>
					<div v-if="userInfo.cardA != '' || userInfo.cardB != ''" class="user-info-imgs-div">
						<div
						v-if="userInfo.cardA"
						:style="{ background: `url(${userInfo.cardA})` }"
						class="user-info-imgs wechat-preview-img"
						></div>
						<div
						v-if="userInfo.cardB"
						:style="{ background: `url(${userInfo.cardB})` }"
						class="user-info-imgs wechat-preview-img"
						></div>
					</div>
				</div>
				<!-- 填写的内容 -->
				<div id="write-content" @click="clickWriteContent">
				<div v-if="userInfo.yourSelf" class="write-content-option">
					<span class="write-content-option-title">自我介绍:</span>
					<span v-html="userInfo.yourSelf" id="introduce-myself-text" class="write-content-option-text"></span>
				</div>
				<div v-if="userInfo.supply" class="write-content-option">
					<span id="supply-option-name" class="write-content-option-title">我的供应:</span>
					<span v-html="userInfo.supply" id="supply-text" class="write-content-option-text"></span>
				</div>
				<div v-if="userInfo.demand" class="write-content-option">
					<span class="write-content-option-title">我的需求:</span>
					<span v-html="userInfo.demand" id="demand-text" class="write-content-option-text"></span>
				</div>
				<div v-if="userInfo.isPartner" id="find-partner">
					<img class="help-par-icon" src="https://www.mrobiji.com/images/par-help-red-icon.svg" />
					我要找业务互助合作伙伴
				</div>
				<div v-if="userInfo.findWho" class="write-content-option">
					<span class="write-content-option-title">我要找谁:</span>
					<span v-html="userInfo.findWho" id="find-person-text" class="write-content-option-text"></span>
				</div>
				<div v-if="userInfo.myHelp" class="write-content-option">
					<span class="write-content-option-title">我能帮助:</span>
					<span v-html="userInfo.myHelp" id="my-role-text" class="write-content-option-text"></span>
				</div>
				</div>
				<div id="is-all">已显示全部</div>

				<!-- 菜单栏 -->
				<btn-menu ref="btnMenu" 
				:apiData="userInfo" 
				:userIndexInfo="userIndexInfo"
				@getUserIndexDataPar="getUserIndexData" 
				@showUserSharePar="showUserShare">
				</btn-menu>
				<!-- 显示分享 -->
				<user-shared-show ref="userSharedShow"></user-shared-show>
			</div>
		</div>
		<!-- 看看名片卡图提示 -->
		<div @click="hideOverlay" v-show="showWindow === 'lookAtCardHint'" class="look-at-card-hint">
			<div class="text">看一看自己的名片卡图</div>
			<img class="img" :src="img.crookedArrowsWhiteIcon">
		</div>
        <van-overlay :show="overlayShow" @click="hideOverlay" />
  </div>
</template>

<script>
// UI组件
import { Image, Overlay, Lazyload } from "vant"

// 自定义组件
import TopNav from "_components/project/common/TopNav"
import BtnMenu from "_components/project/UserBus/BtnMenu"
import UserSharedShow from "_components/project/ShowWindow/UserSharedShow"
import UserHeadImg from '_components/project/common/UserHeadImg'

// 字体
import '_assets/fonts/iconfont.css'

// 自定义方法
import { getQueryStrParams } from "_commonFn/url"
import { getUserBusInfo, toFollow, toCancelFollow, getUserIndex, getBusCardInfo } from "_network/request"
import { getProImg } from "_projectFn/images"
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"
import { isLoginChose } from '_projectFn/login'
import { isObjectValueEqual } from "_commonFn/object"
import { checkDataEqualVal } from "_commonFn/check"
import { setUserShareLoginUrlInfo } from "_projectFn/user"
import { checkIsPreviewImg, } from "_commonFn/image"
import { previewImgVant } from "_projectFn/images"
import { getImgSrc } from "_commonFn/string"
import { getCookie } from '_commonFn/cookie'

// VUE 全家桶
import Vue from "vue"

// 本地图片
import manSexIcon from "_assets/img/sex-man-icon.svg"
import womenSexIcon from "_assets/img/sex-women-icon.svg"
import crookedArrowsWhite from "_assets/img/crooked-arrows-whaite.svg"

Vue.use(Image).use(Lazyload).use(Overlay)

export default {
	name: "UserBus",
	data() {
		return {
			title: "用户业务详情",
			queryStr: {},
			userInfo: {
				id: "",
				userId: "",
				img: "",
				name: "",
				sexImg: "",
				isFollow: 0,
				area: "",
				companyName: "",
				cardA: "",
				cardB: "",
				supply: "", // string	我的供应
				demand: "", // string	我的需求
				findWho: "", //	string	我要找谁
				myHelp: "", // string	我能帮助
				isPartner: "", //int	是否选择了我要找业务互助合作伙伴（1：是，0：否）
				yourSelf: "", // string	介绍自己
				fansCount: "", // 粉丝数量
				isViewWechat: "", // 当前登录用户查看微信权限是否受限(0:否,1:是，-1：未知)
				isUserBusiness: "", // 查看用户是否填写了业务信息(0:否,1:是)
				isMyWx: "", // 查看用户是否具有查看我的微信权限(0:否,1:是)
				isPayViewWx: "", //	int	当前登录用户是否已支付查看过该微信(0:否,1:是)
				viewFreeWx: "", // int	当前登录用户当天免费查看我的微信次数
				maxViewFreeWx: "", // int	每个用户当天免费查看我的微信最大次数
				viewFreeWxPay: "", // float	查看用户查看我的微信支付积分
				getData: {},
				userLevel: "", // int	用户级别(0：普通用户,1:高级用户,2:资深用户,3:超级用户)
				signature: "", // string	用户签名
				offer: "", // Decimal	用户当前总贡献分
				// isWeeekSetBus: true, // 是否在一周内
			},
			getWechatApiTask: 0,
			userIndexInfo: { // 用户主页信息
				id: '',
				userId: '',
				name: '', // 用户名称
				isUserBusiness: '', // int	查看用户是否填写了业务信息(0:否,1:是)
				isViewWechat: '', // int	查看用户微信查看权限是否受限(0:否,1:是，-1：未知)
				isMyWx: '', // int	查看用户是否具有查看我的微信权限(0:否,1:是)
				isPayViewWx: '', // int	当前登录用户是否已支付查看过该微信(0:否,1:是)
				viewFreeWx: '', // int	当前登录用户当天免费查看我的微信次数
				maxViewFreeWx: '', // int	每个用户当天免费查看我的微信最大次数
				viewFreeWxPay: '', // float	查看用户查看我的微信支付积分
				bindUserBusiness: '', // int	被查看用户是否填写了业务信息(0:否,1:是)
				isCheckedWechatInfo: false, // 本次是否已查看微信
				tempImg: '',
				area: '',
				company: '',
				signature: '',
				sex: '',
				sexImg: '',
			},
			viewImgList: [], // 填写内容图片列表
			img: {
				crookedArrowsWhiteIcon: getProImg('crooked-arrows-whaite.svg', crookedArrowsWhite)
			},
			overlayShow: false,
			showWindow: '',
			pageBasicData: {
				visitCount: 0,
			},
		};
	},
	computed: {
		followInfo() {
			// console.log('this.userInfo.isFollow', this.userInfo.isFollow)
			if (this.userInfo.isFollow) {
				return {
					text: "已关注",
					class: "is-follow"
				}
			}
			return {
				text: "+ 关注",
				class: ""
			}
		}
	},
	methods: {
		// 点击关注、取消关注
		clickFollow() {
			if (isLoginChose()) {
				const that = this
				if (that.userInfo.isFollow) {
					that.cancelFollow(() => {
						that.userInfo.isFollow = 0
					})
				} else {
					that.follow(() => {
						that.userInfo.isFollow = 1
					})
				}
			}
		},
		// 执行关注
		follow(callback) {
			toFollow({
				userId: this.userInfo.id,
				callback() {
					typeof callback === 'function' && callback(true)
				}
			})
		},
		// 执行取消关注
		cancelFollow(callback) {
			toCancelFollow({
				userId: this.userInfo.id,
				callback() {
					typeof callback === 'function' && callback(true)
				}
			})
		},
		// 设置预览图片列表
		setViewImgList(data) {
			let imgArr = []
			if(Array.isArray(data.contentList) && data.contentList.length > 0) {
				let str = ''
				data.contentList.forEach(item => {
					str += item
				})
				imgArr = [...getImgSrc(str)]
			}
			if(Array.isArray(data.imgList) && data.imgList.length > 0) {
				data.imgList.forEach(item => {
					if (item) {
						imgArr.push(item)
					}
				})
			}
			this.viewImgList = imgArr
			// console.log('this.viewImgList', this.viewImgList)
		},
		clickWriteContent(e) {
			// console.log('e', e)
			const that = this
			checkIsPreviewImg(e, (imgSrc) => {
				if (imgSrc) {
					that.showViewImg(imgSrc)
				}
			})
		},
		// 显示预览图片
		showViewImg(src) {
			// console.log('src', src)
			if (src) {
				previewImgVant({
					imgSrc: src,
					imgList: this.viewImgList
				})
			}
		},
		// 设置用户业务信息
		async setUserInfo(data) {
			this.title = `${data.UserItem.NickName}的业务`
			this.userInfo.getData = data;
			this.userInfo.id = data.UserItem.UserId;
			this.userInfo.userId = data.UserItem.UserId;
			this.userInfo.img = data.UserItem.HeadImg;
			this.userInfo.name = data.UserItem.NickName;
			this.userInfo.sexImg = data.UserItem.Sex == 1 ? getProImg("sex-man-icon.svg", manSexIcon) : getProImg("sex-women-icon.svg", womenSexIcon);
			this.userInfo.isFollow = data.IsFuns;
			this.userInfo.area = data.Area;
			this.userInfo.companyName = data.Company;
			this.userInfo.cardA = data.CardA;
			this.userInfo.cardB = data.CardB;
			this.userInfo.supply = data.Supply; // string	我的供应
			this.userInfo.demand = data.Demand; // string	我的需求
			this.userInfo.findWho = data.FindWho; //	string	我要找谁
			this.userInfo.myHelp = data.MyHelp; // string	我能帮助
			this.userInfo.isPartner = data.IsPartner; //int	是否选择了我要找业务互助合作伙伴（1：是，0：否）
			this.userInfo.yourSelf = data.YourSelf; // string	介绍自己
			this.userInfo.fansCount = data.FansCount; // 粉丝数量
			this.userInfo.isViewWechat = data.IsViewWechat; // 当前登录用户查看微信权限是否受限(0:否,1:是，-1：未知)
			this.userInfo.isUserBusiness = data.IsUserBusiness; // 查看用户是否填写了业务信息(0:否,1:是)
			this.userInfo.isMyWx = data.IsMyWx; // 查看用户是否具有查看我的微信权限(0:否,1:是)
			this.userInfo.isPayViewWx = data.IsPayViewWx; //	int	当前登录用户是否已支付查看过该微信(0:否,1:是)
			this.userInfo.viewFreeWx = data.ViewFreeWx; // int	当前登录用户当天免费查看我的微信次数
			this.userInfo.maxViewFreeWx = data.MaxViewFreeWx; // int	每个用户当天免费查看我的微信最大次数
			this.userInfo.viewFreeWxPay = data.ViewFreeWxPay; // float	查看用户查看我的微信支付积分
			this.userInfo.userLevel = data.UserItem.UserLevel; // int	用户级别(0：普通用户,1:高级用户,2:资深用户,3:超级用户)
			this.userInfo.signature = data.UserItem.Signature; // string	用户签名
			this.userInfo.offer = data.UserItem.Offer; // Decimal	用户当前总贡献分
			this.pageBasicData.visitCount = data.ViewPageCount || 0
			if (data.UserDefaultTemplateItem && Object.keys(data.UserDefaultTemplateItem).length > 0) {
				const tempData = data.UserDefaultTemplateItem
				this.userIndexInfo.tempData = tempData
				this.userIndexInfo.tempImg = tempData.TplImgUrl
			} else {
				const requestTempImg = await getBusCardInfo({
					type: data.UserItem.Sex == 1 ? 3 : 4,
					page: 1,
					pageSize: 20,
				})
				// console.log('requestTempImg', requestTempImg)
				if (requestTempImg.data && requestTempImg.data.TemplateItem[0] && requestTempImg.data.TemplateItem[0].TplImgUrl) {
					const tempImg = requestTempImg.data.TemplateItem[0].TplImgUrl
					// console.log('tempImg', tempImg)
					this.userIndexInfo.tempImg = tempImg
				}
				if (getCookie('UserId') == this.queryStr.userId) {
					this.showLookAtCard() // 显示看看名片看图提示
				}
			}
			this.userIndexInfo.name = data.UserItem.NickName
			this.userIndexInfo.img = data.UserItem.HeadImg
			this.userIndexInfo.supply = data.Supply; // string	我的供应
			this.userIndexInfo.demand = data.Demand; // string	我的需求
			this.userIndexInfo.findWho = data.FindWho; //	string	我要找谁
			this.userIndexInfo.myHelp = data.MyHelp; // string	我能帮助
			this.userIndexInfo.isPartner = data.IsPartner; //int	是否选择了我要找业务互助合作伙伴（1：是，0：否）
			this.userIndexInfo.yourSelf = data.YourSelf; // string	介绍自己
			this.userIndexInfo.sex = data.UserItem.Sex == 1 ? 1 : 0
			this.userIndexInfo.sexImg = this.userInfo.sexImg
			this.userIndexInfo.id = data.UserItem.UserId
			this.userIndexInfo.userId = data.UserItem.UserId
			this.userIndexInfo.area = data.Area
			this.userIndexInfo.companyName = data.Company
			this.userIndexInfo.signature = data.UserItem.Signature // string	用户签名
			// console.log('this.userIndexInfo.company', this.userIndexInfo.company)

			// 设置预览图片
			const viewImg = {
				contentList: [data.YourSelf, data.Supply, data.Demand, ],
				imgList: [data.CardA, data.CardB]
			}
			if (data.IsPartner) {
				viewImg.contentList = [...viewImg.contentList, data.FindWho, data.MyHelp]
			}
			this.setViewImgList(viewImg)
		},
		hideOverlay() {
			this.overlayShow = false
			this.showWindow = ''
		},
		// 显示看看名片看图提示
		showLookAtCard() {
			this.overlayShow = true
			this.showWindow = 'lookAtCardHint'
			setTimeout(() => {
				if (this.showWindow === 'lookAtCardHint') {
					this.overlayShow = false
					this.showWindow = ''
				}
			}, 3000)
		},
		// 获取url参数
		setQueryStrParams() {
			this.queryStr = getQueryStrParams({
				params: ["type", "userId", "shareUser"],
				query: this.$route.query
			})
		},
		// 获取用户的业务信息
		getUserInfo() {
			if (this.queryStr.userId) {
				// 显示加载中
				loadingVantToa({})
				getUserBusInfo({
					userId: this.queryStr.userId
				})
				.then(res => {
					console.log("获取用户的业务信息 res：", res);
					if (res.errcode == 0) {
						clearVantToa()
						this.setUserInfo(res.data) // 设置用户业务信息
						this.setShare()
					} else {
						this.userInfo.getData = {}
						failTextVantToa(res.message)
					}
				}, res => {
					console.log("fail: res", res)
					if (res.errcode != 2000) {
						failTextVantToa("服务器正在修整，请稍后")
					}
					this.userInfo.getData = {}
				})
				.catch(res => {
					console.log("catch：res", res)
					failTextVantToa("服务器正在修整，请稍后")
					this.userInfo.getData = {}
				})
			}
		},
		// 保存用户主页信息
		setUserIndexInfo(data) {
			this.userIndexInfo.id = data.UserItem.UserId
			this.userIndexInfo.name = data.UserItem.NickName // 用户名称
			this.userIndexInfo.isUserBusiness = data.IsUserBusiness // int	查看用户是否填写了业务信息(0:否,1:是)
			this.userIndexInfo.isViewWechat = data.IsViewWechat // int	查看用户微信查看权限是否受限(0:否,1:是，-1：未知)
			this.userIndexInfo.isMyWx = data.IsMyWx // int	查看用户是否具有查看我的微信权限(0:否,1:是)
			this.userIndexInfo.isPayViewWx = data.IsPayViewWx // int	当前登录用户是否已支付查看过该微信(0:否,1:是)
			this.userIndexInfo.viewFreeWx = data.ViewFreeWx // int	当前登录用户当天免费查看我的微信次数
			this.userIndexInfo.maxViewFreeWx = data.MaxViewFreeWx // int	每个用户当天免费查看我的微信最大次数
			this.userIndexInfo.viewFreeWxPay = data.ViewFreeWxPay // float	查看用户查看我的微信支付积分
			this.userIndexInfo.bindUserBusiness = data.BindUserBusiness // int	被查看用户是否填写了业务信息(0:否,1:是)
		},
		// 分享
		setShare() {
			// console.log('this.$store.state.wechat', this.$store.state.wechat)
			if (this.$store.state.wechat.isWechatBro) {
				const that = this
				checkDataEqualVal({
					data: this.$store.state.wechat,
					key: 'getGetWechatSdkStu',
					val: 'success',
					callback() {
						that.$refs.btnMenu.share({data: that.userInfo})
					}
				})
			}
		},
		// 显示用户分享
		showUserShare() {
			this.$refs.userSharedShow.showOverlay()
		},
		// 获取用户的主页信息
		getUserIndexData(callback) {
			// console.log('callback', callback)
			if (this.userIndexInfo.isCheckedWechatInfo) {
				typeof callback === 'function' && callback(this.userIndexInfo)
			} else {
				loadingVantToa({})
				getUserIndex(this.userInfo.id)
				.then(res => {
					console.log("获取用户的主页信息 res：", res)
					if (res.errcode == 0) {
						this.userIndexInfo.isCheckedWechatInfo = true
						this.setUserIndexInfo(res.data) // 保存用户主页信息
						clearVantToa()
						typeof callback === 'function' && callback(this.userIndexInfo)
					} else {
						failTextVantToa(res.message)
					}
				}, res => {
					console.log("fail: res", res)
					if (res.errcode != 2000) {
						failTextVantToa("服务器正在修整，请稍后")
					}
				})
				.catch(res => {
					console.log("catch：res", res)
					failTextVantToa("服务器正在修整，请稍后")
				})
			}
		},
		// 某事成功判断
		successShow(successData) {
			if (successData.type === 'UserBusBrowseWechatSuccess') { // 查看微信成功事件
				this.$refs.btnMenu.paySuccessWechatInfo(successData.data)
			}
		},
		// 判断是否为同一个页面，否则重新获取
		isSamePage() {
			if (Object.keys(this.queryStr).length > 0) {
				const query = getQueryStrParams({
					params: ["type", "userId", "shareUser"],
					query: this.$route.query
				})
				// console.log('query', query)
				// console.log('this.queryStr', this.queryStr)
				if (isObjectValueEqual(query, this.queryStr)) {
					// console.log('是同一个页面')
					if (Object.keys(this.userInfo.getData).length  === 0) {
						this.getUserInfo() // 获取用户的业务信息
					} else {
						const that = this
						checkDataEqualVal({
							data: this.$store.state.wechat,
							key: 'getGetWechatSdkStu',
							val: 'success',
							callback() {
								that.$refs.btnMenu.share({data: that.userInfo})
							}
						})
					}
				} else {
					// console.log('不是同一个页面')
					this.userInfo.getData = {}
					this.setQueryStrParams() // 获取url参数
					this.getUserInfo() // 获取用户的业务信息
				}
			}
		},
		clearPageStatus() {
			this.overlayShow = false
			this.showWindow = ''
		},
	},
	mounted() {
		// console.log('mounted')
		this.setQueryStrParams() // 获取url参数
		// this.getUserInfo() // 获取用户的业务信息
        if (this.queryStr.shareUser) {
            setUserShareLoginUrlInfo({
                urlType: 'wechatUserItem',
                userId: this.queryStr.shareUser
            })
        }
	},
	// 激活时调用
	activated() {
		// this.setQueryStrParams() // 获取url参数
		// this.getUserInfo() // 获取用户的业务信息
		// console.log('activated')
		let successEvent = sessionStorage.getItem('successEvent')
		if (successEvent) {
			successEvent = JSON.parse(successEvent)
			if (successEvent.page === 'UserBus') {
				sessionStorage.removeItem('successEvent')
				this.successShow(successEvent)
			}
		}
		this.isSamePage()
		this.clearPageStatus()
	},
	components: {
		TopNav,
		BtnMenu,
		UserSharedShow,
		UserHeadImg,
	}
};
</script>

<style lang="scss" scoped>
#user-card-detail {
	height: 100%;
	background: #eeeeee;
	.content {
		background: white;
	}

  /* 用户信息 */
  .user-info {
    border-bottom: 5px solid rgb(239, 237, 237);
    .user-info-top {
      width: 100%;
      display: -webkit-flex;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding: 15px;

      .user-info-left {
        position: relative;

        #issue-user-img {
          width: 50px;
          height: 50px;
          flex-shrink: 0;
          border-radius: 50%;
          margin-right: 10px;
        }

        #user-head-sex {
          position: absolute;
          bottom: 1px;
          right: 4px;
          border-radius: 50%;
          width: 18px;
          height: 18px;
          background: white;
        }
      }

      .user-info-right {
        width: 100%;
        font-size: 12px;

        .user-info-right-children {
          display: -webkit-flex;
          display: -moz-flex;
          display: flex;
          align-items: center;
          width: 100%;
          height: 22px;

          .user-name {
            font-weight: bold;
          }

          .user-info-id-div {
            color: #999999;
            font-size: 12px;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            #follow {
              height: 28px;
              display: -webkit-flex;
              display: flex;
              background: #0197dd;
              color: white;
              justify-content: center;
              align-items: center;
              width: 76px;
              border-radius: 3px;
              font-size: 12px;
              flex-shrink: 0;
            }

            .is-follow {
              background: #cccccc !important;
            }
          }

          .user-info-right-children-left {
            width: 100%;
            font-weight: bold;
            display: -webkit-flex;
            display: flex;

            .user-name {
              font-size: 16px;
              font-weight: bold;
              // display: -webkit-box;
              // -webkit-box-orient: vertical;
              // box-orient: vertical;
              // -webkit-line-clamp: 1;
              // line-clamp: 1;
              // overflow: hidden;
              // line-height: 28px;
            }
          }

          .user-info-right-children-right {
            width: 64px;
            flex-shrink: 0;
            text-align: center;

            .follow-a {
              height: 22px;
              display: -webkit-flex;
              display: flex;
              background: #0197dd;
              color: white;
              justify-content: center;
              align-items: center;
              width: 100%;
              border-radius: 3px;
              font-size: 12px;
              flex-shrink: 0;
            }

            .is-follow {
              background: #cccccc !important;
            }
          }
        }

        .user-info-right-name-div {
          .user-info-right-name {
            font-weight: bold;
            color: #333;
          }

          #show-wechat-info {
            img {
              width: 25px;
            }
          }
        }

        .user-info-right-other {
          display: -webkit-flex;
          display: flex;
          font-size: 12px;
          color: #999999;

          #find-partner-icon {
            margin-left: 2px;
          }
        }
      }
    }

    .user-info-other {
      margin-bottom: 6px;

      .user-info-option {
        line-height: 30px;
        padding: 0 15px;
        .user-info-option-explain {
          color: #999999;

          .user-info-icon {
            width: 15px;
            position: relative;
            bottom: 2px;
          }
        }
      }
    }

    .user-info-imgs-div {
      display: -webkit-flex;
      display: flex;
      padding: 0 15px;
      margin-bottom: 10px;

      .user-info-imgs {
        width: 50%;
        padding-bottom: 24.52%;
        background-size: 100% 100% !important;

        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }

  #write-content {

    .write-content-option {

      &:first-child {
        margin-top: 20px;
      }

      padding: 0 15px;
      margin-bottom: 15px;

      .write-content-option-title {
        display: block;
        margin-bottom: 10px;
        margin-top: 10px;
        color: #999999;
        font-size: 14px;
        font-weight: bold;
      }

      .write-content-option-text {
        font-size: 16px;
      }
    }

    #find-partner {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      height: 35px;
      align-items: center;
      padding: 0 10px;
      color: red;

      img {
        width: 15px;
        height: 15px;
        margin-right: 4px;
      }
    }
  }

	#is-all {
		line-height: 35px;
		text-align: center;
		background: #eeeeee;
	}

	.look-at-card-hint {
		// width: 80px;
		position: fixed;
		bottom: 130px;
		right: 20px;
		z-index: 2;
		text-align: center;
		cursor: pointer;

		.text {
			color: white;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 8px;
			width: 150px;
		}

		.img {
			position: fixed;
			width: 80px;
			right: 25%;
			$width: 25%;
			margin-right: -35px;
			bottom: 50px;
		}
	}

	.vist-sti-icon {
		margin-right: 2px;
	}

	.vist-sti-count {
		font-size: 12px;
	}
}
</style>